<template>
	<view class="loginBox">
		<view class="back"></view>
		<view style="height: 250rpx;"></view>
		<view class="name" @click="back"><uni-icons class="backIcon" size="22" color="white"
				type="left"></uni-icons>欢迎登录禹冰之家</view>
		<view class="buttonBox">
			<image class="logo" mode="widthFix" src="../../static/yblogo.png"></image>
			<view class="formation">
				<view class="labelBox">
					<view class="input">
						<input placeholder="账号" v-model="form.username"></input>
					</view>
				</view>
				<view class="labelBox">
					<view class="input">
						<input placeholder="密码" v-model="form.password"></input>
					</view>
				</view>
			</view>
			<view class="login" @click="login">登录</view>
			<view class="agreement">
				<image v-if="isagree==0" @click="choose(1)" style="width:36rpx;height: 36rpx;margin-right: 14rpx;margin-top: 2rpx;" src="../../static/agreed.png" mode="aspectFill"></image>
				<image v-if="isagree==1" @click="choose(0)" style="width:36rpx;height: 36rpx;margin-right: 14rpx;margin-top: 2rpx;" src="../../static/isagreed.png" mode="aspectFill"></image>
				<view class="text">同意并登录<text style="color: #3381FF;" @click="goAgree(1)" >【服务协议】</text>和<text style="color: #3381FF;" @click="goAgree(2)">【隐私保护指引】</text></view>
			</view>

			<view class="tips"  @click="toRegister">还没有账号？<span class="register">点击注册</span></view>

		  
		</view>
	
	</view>
</template>

<script>
	import {getUser,login} from '@/utils/API.js'
	export default {
		data() {
			return {
				isagree:0,
				form: {
					"username": "",
					"password": "",
					"code": "123"
				}
			}
		},
		methods: {
			async getUser() {
				const result = await getUser()
				if(res.code==200){
					uni.setStorageSync('users',res.user)
					if(res.user.phonenumber==''){
						uni.showToast({
							title:'请先绑定手机号',
							 icon:'none',
							 duration:1000
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages-user/setphone/setphone?id='+'绑定你的手机号'
							})
						},1000)
						return
					}else{
						uni.showToast({
							title:'登陆成功',
							icon:'success',
							duration:1000
						})
						setTimeout(()=>{
							uni.setStorageSync('token',res.data.access_token)
							uni.reLaunch({
								url:'/pages/home/home?istype='+'客户端'
							})
						},1000)
					}
				}
				
			},
			//同意隐私条款
			choose(e){
				this.isagree = e
			},
			//查看协议
			goAgree(id){
				uni.navigateTo({
					url:'/pages-user/agreement/agreement?id='+id
				})
			},
			
			toRegister() {
				uni.navigateTo({
					url: '/pages-login/register/register'
				})
			},
			back() {
				uni.navigateBack()
			},
			async login() {
				if(this.form.username==''){
					uni.showToast({
						title:'请输入账号',
						icon:'none',
						duration:1000
					})
					return
				}
				if(this.form.password==''){
					uni.showToast({
						title:'请输入密码',
						icon:'none',
						duration:1000
					})
					return
				}
				if(this.isagree==0){
					uni.showToast({
						title:'请先查看并同意隐私服务条款',
						icon:'none',
						duration:1500
					})
					return
				}
				uni.showLoading({
					title: '登陆中~'
				})
				var data = this.form
				const res = await login(data)
				if(res.code==200){
					console.log(res);
					uni.hideLoading()
					uni.setStorageSync('istype','客户端')
					this.getUser()
				}else{
					uni.hideLoading()
					uni.showToast({
						title:err.msg,
						icon:'none',
						duration:1000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: "阿里妈妈数黑体";
		font-weight: 700;
		src: url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/PQCnFJB5enWt.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/CaLgXE8NhYHt.woff") format("woff");
		font-display: swap;
	}



	.loginBox {
		height: 100vh;
		background-color: white;
		position: relative;
		z-index: +1;
		background-color: $MainBackColor;

		.formation {
			width: 600rpx;

			.labelBox {
				margin: 10px 0px;

			}

			.verifyBox {
				.input {
					display: flex;
					align-items: center;
					width: 600rpx;

					.verify {
						background-color: $blue;
						color: white;
						margin-left: 10px;
						height: 70rpx;
						width: 600rpx;
						border-radius: 5px;
						text-align: center;
						display: flex;
						align-items: center;
					}
				}
			}
		}

		

		.name {
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: '阿里妈妈数黑体';
			color: white;
			font-size: 60rpx;

			.backIcon {
				font-weight: bold;
				margin-right: 10px;
			}
		}

		.buttonBox {
			background-color: white;
			padding-bottom: 60rpx;box-sizing: border-box;
			border-radius: 10px;
			width: 690rpx;
			background-color: white;
			margin: 0 auto;
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			

			.logo {
				width: 180rpx;
				margin: 20px 0px;
			}

			.login {
				background-color: #3381FF;
				color: white;
				width: 600rpx;
				text-align: center;
				padding: 10px 0px;
				border-radius: 5px;
				margin: 10px 0px;
			}

			.phoneLogin {
				box-sizing: border-box;
				border: 1px solid $grey;
				width: 100%;
				text-align: center;
				padding: 10px 0px;
				border-radius: 5px;
				margin: 10px 0px;
			}

			.tips {
				color: $grey;
				font-size: 14px;
				

				.register {
					color: $blue;
				}
			}
		}
		.agreement {
			display: flex;
			margin-top: 10rpx;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			width: 600rpx;
		
		
			.checkBox {
				border-radius: 50%;
				border: 2px solid $blue;
				width: 8px;
				height: 8px;
				margin-right: 5px;
			}
		
			.text {
				font-size: 14px;
		
			}
		}

		.back {
			z-index: -1;
			position: absolute;
			top: 0px;
			height: 30vh;
			width: 100vw;
			background: linear-gradient(to bottom, #4E8CFF, #80c4ff, rgba(0, 0, 0, 0));
		}
	}
</style>